<!--
 * @Author: 宋杰
 * @Date: 2020-12-25 20:19:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-12 16:53:39
 * @Description: 一家十一口(猜一字)  首页
-->
<template>
  <div class="divBox">
    <div class="div1">
      <div class="topBox">
        <!-- <img src="" alt=""> -->
        <div><i class="iconfont iconnews"></i></div>
        <div>吴证隆到省卫健委调研检查秋冬季疫情防控工作时</div>
      </div>
      <div class="conBox">
        <span
          >10月9日，省长吴政隆前往省卫生健康委员会调研，看望慰问工作人员，对秋冬季疫情防控工作进行再部署再强化再落实。他强调，秋冬季是常态化疫情防控的关键期也是重要的“窗口期”，要深入学习贯彻习近平总书记在全国抗击新冠肺炎疫情表彰大会上的重要讲话精神，坚持人民至上、生命至上，大力弘扬伟大抗疫精神，根据党中央、国务院和省委、省政府决策部署，坚持常态化精准防控和局部应急处置有机结合，坚持人物同防、多病共防，严格落实好“四早”要求，各项防控措施要更...</span
        ><span class="chakanClick" @click="chakanClick">[查看详情]</span>
        <!-- <div></div> -->
      </div>
    </div>

    <!-- 机构信息 -->
    <div class="div2">
      <div class="topBox2">机构信息</div>
      <div class="conBox2">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in div2List" :key="index" :span="8">
            <div class="grid-content bg-purple">
              <span>{{ item.name }}</span
              ><span class="fenhao">:</span><span>{{ item.text }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 机构评星 -->
      <div class="pinxin">
        <span>机构星级评分</span><span class="fenhao">:</span>
        <el-rate v-model="value2" :colors="colors"> </el-rate>
        <el-button class="shenbao" round type="primary" plain
          ><div>信用申报</div></el-button
        >
      </div>
    </div>

    <!-- 机构项目信息一栏 -->
    <div class="div3">
      <div class="topBox3">
        <div class="topBox22">机构项目信息一栏</div>
        <div style="position: absolute; right: 10px; margin-right: 5%">
          <el-select
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <div class="conBox3">
        <div
          class="conBoxList"
          v-for="(item, index) in conBox3List"
          :key="index"
          :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
        >
          <div class="conBox3_1">
            <span>{{ item.fenshu }}</span
            >分
          </div>
          <div class="conBox3_3">
            <div>{{ item.jigou }}</div>
            <div>{{ item.name }}</div>
          </div>
          <div class="conBox3_2">
            <div>创建时间</div>
            <div>{{ item.time }}</div>
          </div>
          <div class="conBox3_2">
            <div>培训类型</div>
            <div>{{ item.leixin }}</div>
          </div>
          <div class="conBox3_2">
            <div>教务人员</div>
            <div>{{ item.renyuan }}</div>
          </div>
          <div class="conBox3_2">
            <div>评价时间</div>
            <div>{{ item.kaikeshijian }}</div>
          </div>
        </div>
      </div>

      <!-- 更多页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!-- 机构项目信息一栏end -->

    <!-- 机构评价一栏 -->
    <div class="div3">
      <div class="topBox3">
        <div class="topBox22">机构评价一栏</div>
      </div>

      <div class="conBox3">
        <div
          class="conBoxList"
          v-for="(item, index) in conBox4List"
          :key="index"
        >
          <div class="conBox4_1">
            <div>{{ item.name[0] }}</div>
            <div>学员</div>
          </div>
          <div class="conBox3_3">
            <div>{{ item.text }}</div>
          </div>
        </div>
      </div>

      <!-- 更多页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!-- 机构评价一栏end -->

    <!-- 学员机构项目评价一览 -->
    <div class="div3 div4">
      <div class="topBox3">
        <div class="topBox222">学员机构项目评价一览</div>
        <div style="position: absolute; right: 10px; margin-right: 5%">
          <el-select
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <div class="conBox3">
        <div
          class="conBoxList"
          v-for="(item, index) in conBox3List"
          :key="index"
          :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
        >
          <div class="conBox3_3">
            <div>{{ item.jigou }}</div>
            <div>评价员: {{ item.name }}</div>
          </div>
          <div class="conBox3_2">
            <div>创建时间</div>
            <div>{{ item.time }}</div>
          </div>
          <div class="conBox3_2">
            <div>培训类型</div>
            <div>{{ item.leixin }}</div>
          </div>
          <div class="conBox3_2">
            <div>教务人员</div>
            <div>{{ item.renyuan }}</div>
          </div>
          <div class="conBox3_2">
            <div>评价时间</div>
            <div>{{ item.kaikeshijian }}</div>
          </div>
          <!-- 详情 -->
          <el-button type="primary" plain size="mini" round>详情</el-button>
        </div>
      </div>

      <!-- 更多页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!-- 学员机构项目评价一览end -->
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      // activeName: "first"
      // 评星
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      // 机构信息
      div2List: [
        { id: "1", name: "机构名", text: "新东方培训机构" },
        { id: "2", name: "法人名", text: "王有才" },
        { id: "3", name: "办学许可证显示有/无", text: "有" },
        { id: "4", name: "收费许可证显示有/无", text: "有" },
        { id: "5", name: "教师队伍人数", text: "20人" },
        { id: "6", name: "办公面积", text: "300平方米" },
        { id: "7", name: "教学面积", text: "1000平方米" },
        { id: "8", name: "经营内容", text: "培训、教学" },
        { id: "9", name: "详细地址", text: "江苏省南京市秦淮区鼓楼" }
      ],
      // 机构项目信息一栏
      // 搜索
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      // 列表
      conBox3List: [
        {
          id: "0",
          fenshu: "60",
          jigou: "语文培训班",
          name: "李伟",
          time: "2020.2.3",
          leixin: "线上",
          renyuan: "丁甜甜",
          kaikeshijian: "2020.4.8"
        },
        {
          id: "1",
          fenshu: "60",
          jigou: "语文培训班",
          name: "赵文卓",
          time: "2020.5.3",
          leixin: "线下",
          renyuan: "刘巧兰",
          kaikeshijian: "2020.4.5"
        },
        {
          id: "2",
          fenshu: "60",
          jigou: "数学培训班",
          name: "宋茜",
          time: "2020.3.3",
          leixin: "线上",
          renyuan: "王佳",
          kaikeshijian: "2020.4.9"
        }
      ],
      // 分页
      // 日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      currentPage1: 5,

      // 机构项目信息一栏 end

      // 机构评价一栏
      conBox4List: [
        { id: "1", name: "张2", text: "学校的老师很好，很负责" },
        { id: "1", name: "宋3", text: "这个学校的老师不好，不负责任" },
        {
          id: "1",
          name: "张",
          text: "学校给了我很多知识，很感谢在学校学习的日子"
        },
        {
          id: "1",
          name: "王2",
          text:
            "培训专人负责，每天简单介绍一下老师，点名，做好出勤记录。对于缺勤学员采取不予发放结业证并上报民政局，拉入下次培训黑名单的恐吓，着实老实了一部分学员"
        },
        {
          id: "1",
          name: "张",
          text:
            "培训期间给恰遇生日的学员准备的小礼物，学员比较惊喜，同时请学员上台说说这几天的培训收获。"
        }
      ]
      // 机构评价一栏end
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 机构项目信息一栏
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 查看详情页
    chakanClick() {
      this.$router.push({ name: "HomePageArticle" });
    }
  },

  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100vh; */
  padding: 0 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-top: 57px;
}
/* div1 */
.div1 {
  background: #fff;
  width: 100%;
  min-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.topBox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #2276c3;
  padding: 0 10px;
  display: flex;
  align-items: center;
}
/* 图片 */
.topBox > :nth-child(1) {
  color: #fff;
  margin-left: 10px;
  /* width: 24px;
  height: 24px;
  background: #f5f6fa;
  margin-right: 10px; */
}
/* top内容 */
.topBox > :nth-child(2) {
  font-size: 17px;
  line-height: 24px;
  color: #fff;
  /* margin-top: 13px; */
  margin-left: 20px;
}
/* con内容 */
.conBox {
  /* width: 1263px; */
  /* height: 75px; */
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1b2531;
  line-height: 30px;
  padding: 20px 30px;
}
/* con图片 */
.conBox > :nth-child(2) {
  width: 24px;
  height: 24px;
  background: #f5f6fa;
  margin-right: 10px;
  display: inline;
}

.div2 {
  background: #fff;
  width: 100%;
  min-height: 220px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  /* display: flex;
  flex-direction:column; */
}
/* .topBox2 {
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
} */
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
.topBox22 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h22-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
.topBox222 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h22-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 12px;
  padding-top: 5px;
}
.grid-content {
  margin-bottom: 20px;
}
.conBox2 {
  padding: 0 10px;
  margin-top: 55px;
}
.pinxin {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
/* 分号 */
.fenhao {
  margin: 0 6px;
}
/* 申报 */
.shenbao {
  height: 24px;
  display: flex;
  align-items: center;
}
/* .shenbao > :nth-child(1) {
  display: inline-block; 
  line-height: 24px;
} */

.div3 {
  background: #fff;
  width: 100%;
  min-height: 220px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.sousuoBox {
  margin-left: 10px;
}
.conBoxList {
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.orangecolor {
  border: 1px solid rgb(240, 147, 40) !important;
  color: rgb(240, 147, 40) !important;
}
.redcolor {
  border: 1px solid rgb(240, 69, 17) !important;
  color: rgb(240, 69, 17) !important;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
/* 分页 */
.fenye {
  border-top: 1px solid rgb(233, 232, 232);
  height: 40px;
  display: flex;
  align-items: center;
}
.fenye > :nth-child(1) {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.fenye > :nth-child(1) > :nth-child(1) {
  position: absolute;
  left: 10px;
}

/* 机构评价一栏 */
.conBox4_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none !important;
  width: 50px;
  height: 50px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.conBox4_1 > :nth-child(1) {
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
}
.conBox4_1 > :nth-child(2) {
  line-height: 20px;
}

/* 机构评价一栏end */

/* 学员机构项目评价一览 */
.div4 {
  margin-bottom: 150px;
}
/* 学员机构项目评价一览end */

/* 查看详情 */
.chakanClick {
  background: #fff !important;
  color: #2276c3;
  cursor: pointer;
}
/* 查看详情end */
</style>
